<template>
  <div class="page-content">
    <el-form ref="queryForm" :inline="true" class="mt20" :model="queryParams">
      <el-form-item label="关键词:">
        <el-input
          v-model="queryParams.keywords"
          placeholder="员工姓名/手机号"
          clearable
          style="width: 200px"
        />
      </el-form-item>

      <el-form-item label="员工状态:">
        <el-select v-model="queryParams.job_status" placeholder="员工状态" style="width: 200px">
          <el-option
            v-for="item in jobstatusoptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门:">
        <el-cascader
          style="width: 200px"
          :options="deptoptions"
          :props="props1"
          clearable
          v-model="queryParams.dept_id"
          @change="handleChange"
          :header-cell-style="tableHeaderColor"
          ref="selectedArrRef"
        />
      </el-form-item>
      <el-form-item label="实名状态:">
        <el-select v-model="queryParams.is_real" placeholder="实名状态" style="width: 200px">
          <el-option
            v-for="item in realoptions"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      border
      class="mt20"
      stripe
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      element-loading-text="加载中..."
      header-row-class-name="table-header"
    >
      <el-table-column label="项目名称" align="center" key="name" prop="name" />
      <el-table-column label="标准名称" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="主编单位" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="主管部门" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="立项时间" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="实际拨付经费（万元）" align="center" key="sex" prop="sex">
      </el-table-column>
      <el-table-column label="项目进度" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="大纲编制评审时间" align="center" key="sex" prop="sex">
      </el-table-column>
      <el-table-column label="征求意见评审时间" align="center" key="sex" prop="sex">
      </el-table-column>
      <el-table-column label="送审稿评审时间" align="center" key="sex" prop="sex">
      </el-table-column>
      <el-table-column label="报批完成时间" align="center" key="sex" prop="sex"> </el-table-column>
      <el-table-column label="发布时间" align="center" key="sex" prop="sex"> </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'

  defineOptions({ name: 'UserMixedUsageExample' })
  const queryParams = ref({ keywords: '', dept_id: '', job_status: '', is_real: '' })
  const queryForm = ref()
  const list = ref([
    { name: 'aaa', sex: 1 },
    { name: 'ccc', sex: 1 }
  ])

  const jobstatusoptions = [
    { name: '全部', value: '' },
    { name: '在职', value: 1 },
    { name: '离职', value: 2 }
  ]
</script>

<style lang="scss" scoped>
  .el-table__cell {
    background-color: red !important;
  }

  .aa {
    display: none;
  }

  .bb {
    display: block;
  }

  .cc {
    display: block;
  }
</style>
